<template>
	<div class="detail">
		<v-navbar/>
		<div class="banner">
			<swiper :list="bannerList" class="swiper-height"></swiper>
			<div class="shade">
				<!-- <img src="../../../styles/imgs/deal/deal.png" alt=""> -->
			</div>
		</div>
		<!-- 结束商品展示时间 -->
		<div class="detail_auction">
			<p>
				<img src="../../../styles/imgs/deal/time.png" alt="">
				<span>商品已结束：00：00：00</span>
			</p>
		</div>
		<div class="detail_goods">
			<p class="goodsName">{{goodsData.NAME}}</p>
			<p class="deal">
				<span class="dealP">成交价</span>
				<span class="price">￥{{goodsData.goods_current_price}}</span>
				<span class="marketP">市场价￥{{goodsData.market_retail_price}}</span>
			</p>
		</div>
		<div class="detail_bids">
			<div class="bidsTit">
				<Icon class="jilu" type="ios-paper-outline" />
				<span>出价记录</span>
			</div>
			<div class="d-table">
				<table :class="{'marquee_top': animate}">
					<tr v-for="(item, i) in bids" :key="item.id" :class="{'change': i == 1}">
						<td width=20><img :src="item.head_portrait" alt=""></td>
						<td>{{item.real_name}}</td>
						<td>出价￥{{item.self_current_price}}抢拍</td>
						<td>{{item.create_time}}</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="goodsDetail">
			<div class="bidsTit">
				<img src="../../../styles/imgs/deal/detail.png" alt="">
				<span>商品详情</span>
			</div>
			<div class="goodsImg">
				<img v-for="(img, i) in detailImg" :key="i+100" :src="img" alt="">
			</div>
		</div>
		<!-- 底部 -->
		<div class="bottom">
			<div class="bottom-wrapper">
				<div class="block" @click="_doCollection">
					<div>
						<i class="icon"></i>
					</div>
					<span>收藏</span>
				</div>
				<div class="confirm" @click="_NextIssue">
					<i class="icon"></i>
					<span class="text">前往下一期</span>
				</div>
			</div>
		</div>
		<!-- 分享 -->
		<div v-show="share">
			<share :price="price" @closeShare="_closeShore"></share>
		</div>
	</div>
</template>

<script>
import swiper from '@c/swiper/swiper'
import navbar from '@c/navbar/navbar'
import share from '@c/share/share'
import close from '@imgs/self/close.png'
import CountDown from '@c/countDown/countDown'
import { formatDate } from '@js/formatDate.js'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

export default {
	name: 'DealDetail',
	data() {
		return {
			type: null,
			price: '2000',
			share: false, //分享
			animate: false,
			bidId: '0', //查询出价记录id
			goodsData: {}, //产品数据
			goodsTime: {}, //产品倒计时
			bannerList: [],
			currentTime: 0, //当前系统时间
			timer: '',
			bids: [],//出价记录
			close,//关闭图像
			detailImg: [],//产品详情图片
			isCollection: false,
			auctionPrice: '',//商品价
			bidsTime: '',//出价记录循环
		}
	},

	components: {
		swiper,
		'v-navbar': navbar,
		share,
		CountDown,
	},

	computed: {
		...mapState(['wtitle', 'rback', 'signed']),
	},

	mounted() {},

	methods: {
		...mapMutations(['WTITLE', 'RBACK', 'USERSINGED']),
		// 显示分享
		_share() {
			this.share = true
		},
		// 关闭分享
		_closeShore() {
			this.share = false
		},
		showMarquee() {
			this.animate = true
			setTimeout(() => {
				this.bids.push(this.bids[0])
				this.bids.shift()
				this.animate = false
			}, 500)
		},
		// 获得出价记录
		_getBids(id) {
			vpost(vlink.detail.bid + id).then(re => {
				if (re.status === 0) {
					this.bids = re.data
				} else {
					this.$Message.warning(re.msg)
				}
			})
		},
		// 获得商品详情
		_getEndGoods() {
			this.$store.state.loadding = true
			vpost(vlink.dealDetail + this.$route.query.id).then(re => {
				this.$store.state.loadding = false
				if (re.status === 0) {
					this.goodsData = re.data.list[0]
					this.bannerList = re.data.banImg
					this.detailImg = re.data.infImg
					this._getBids(this.$route.query.id)
					this._getCollection()
				} else {
					this.$Message.warning(re.msg)
				}
			})
		},
		// 前往下一期
		_NextIssue() {
			if (this.goodsData.goods_id == '') {
				return
			}
			this.$router.push({
				path: 'dealDetail',
				name: 'DealDetail',
				query: {
					type: 1,
					id: this.goodsData.goods_id,
				},
			})
		},
		// 收藏
		_getCollection(){
			let key = localStorage.getItem("userId")
			if (key === null) {
				return
			}
			let userInfo = {
				userId: window.localStorage.userId,
				goodsSkuId: this.goodsData.goods_sku_id
			}
			tokenPost(tokenLink.isCollection, userInfo).then(re => {
				if (re.status === 0) {
					this.isCollection = re.data
				} else {
					this.$Message.warning(re.msg)
				}
			})
		},
		// 点击收藏
		_doCollection() {
			let key = localStorage.getItem("userId")
			if (key === null) {
				this.$router.push('/login')
				return
			}
			if (this.isCollection) {
				this._requestCollection(tokenLink.cancelCollection)
			} else {
				this._requestCollection(tokenLink.addCollection)
			}
		},
		// 请求收藏
		_requestCollection(url) {
			let userInfo = {
				userId: window.localStorage.userId,
				goodsSkuId: this.goodsData.goods_sku_id
			}
			tokenPost(url, userInfo).then(re => {
				if (re.status === 0) {
					this.isCollection = !this.isCollection
				} else {
					this.$Message.warning(re.msg)
				}
			})
		},
		// 判断出价记录是否大于3条
		_isBidsLength() {
			if(this.bidsTime) {
				return
			}
			if (this.bids.length > 3) {
				this.bidsTime = setInterval(this.showMarquee, 2000)
			}
		},
	},
	mounted	() {
		this.WTITLE('商品详情')
        this.RBACK(true)
        this_getEndGoods()
		this._isBidsLength()
	},
	watch: {
		goodsTime() {
			console.log(this.goodsTime)
			return this.goodsTime
		},
	},
}
</script>
<style scoped>
</style>
